<template>
    <div class="hot-post-container">
        <div class="title">近期热门贴</div>
         <ul class="hot-post-wrapper">
             <li class="hot-item" v-for="(item, index) in hotList" :key="index">
                 <img :src="item.imgUrl" class="item-img" alt="">
                 <h1 class="item-title">{{item.title}}</h1>
             </li>
         </ul>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                hotList: [
                    {
                        imgUrl: require('../../assets/images/13.jpg'),
                        title: '全网最全python爬虫系统进阶学习(附原代码)学完可就业'
                    },
                    {
                        imgUrl: require('../../assets/images/14.png'),
                        title: 'SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【后端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】'
                    },
                    {
                        imgUrl: require('../../assets/images/15.jpg'),
                        title: 'vue.js基础还不会？——看这篇文章就够了'
                    },
                    {
                        imgUrl: require('../../assets/images/16.jpg'),
                        title: '拿下我人生中第7个Offer，我先收藏为敬'
                    },
                    {
                        imgUrl: require('../../assets/images/17.jpg'),
                        title: '检索20万颗星星只需10秒！这款AI产品能“擎天”'
                    },
                    {
                        imgUrl: require('../../assets/images/18.jpg'),
                        title: '深入浅出！十三张图带你从源码了解SpringBoot启动流程！实战篇'
                    }
                ]
            }
        },
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
    @import "./src/common/scss/mixin";
   .hot-post-container {
       width: 100%;
       padding: 15px 17px;
       box-sizing: border-box;
       .title {
           margin-bottom: 14px;
           line-height: 30px;
           font-weight: 700;
           color: $font-gray;
           font-size: 20px;
       }
       .hot-post-wrapper {
           column-count: 2;
           column-width: 158px;
           column-gap: 21px;
           width: 100%;
           .hot-item {
               width: 158px;
               margin-bottom: 14px;
               break-inside: avoid;
               font-size: 14px;
               line-height: 21px;
               color: $font-gray;
               .item-img {
                   width: 100%;
                   object-fit: contain;
                   transform: scale(1);
                   transition: all 500ms;
                   cursor: pointer;
                   &:hover {
                       box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1);
                       transform: scale(1.1);
                   }
               }
               .item-title {
                   width: 100%;
                   max-height: 64px;
                   font-size: 14px;
                   opacity: .75;
                   font-weight: 400;
                   @include overflow-ell(3);
               }
           }
       }
   }
</style>
